﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dribble Ball</title>
    <link rel="stylesheet" href="../css/db.css" />
    <link rel="stylesheet" href="../css/colorbox.css" />
    <script type="text/javascript" src="../js/track.js" />
</head>
<body>
    <div id="status">
        <div id="counter">
        </div>
    </div>
    <div id="win">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
            width="1200" height="600" version="1.1">
            <radialGradient id="grad1" cx="20%" cy="30%" r="100%">
                <stop offset="0%" style="stop-color: rgb(255,255,255); stop-opacity: 0" />
                <stop offset="100%" style="stop-color: #F5D06C; stop-opacity: 0.4" />
            </radialGradient>
            <g id="back">
                <rect width="100%" height="100%" fill="url(#grad1)" />
                <g id="tip" transform="translate(60 100)" style="opacity: 0;">
                    <line x1="0" y1="100" x2="340" y2="100" stroke="black" stroke-width="5" />
                    <path id="hand" transform="translate(100 100) rotate(-90)" stroke-width="5" fill="black"
                        d="m3.15413,18.13973c1.45895,-0.56738 2.65639,-1.09562 0.3893,-1.11107c-2.00177,0.28494 -7.18101,-1.80971 -3.03076,-2.83932c2.59716,-1.07389 8.50702,1.40649 8.53829,-2.83619c-0.4693,-2.6589 -8.09283,-0.58292 -5.58492,-4.14875c2.76185,-1.19608 8.23813,1.62194 9.16483,-2.07912c-0.84935,-3.58863 -6.16141,-1.29835 -8.83097,-2.29012c-2.58892,0.5654 -3.27038,-3.03942 -0.365,-2.49533c6.71485,-0.38374 13.47723,0.17943 20.16963,-0.60366c1.08082,-0.63414 1.87955,-4.53538 0.51608,-4.79808c-9.7488,-0.21397 -19.51455,-0.01735 -29.24776,-0.65553c-3.49693,-0.03841 -0.82546,-3.9931 1.75917,-3.06437c2.4611,-0.85364 3.43634,-3.09204 5.24278,-5.30219c0.92366,-4.83105 -3.51365,-3.03802 -5.32521,-1.62434c-2.02357,1.40484 -5.50375,4.32099 -7.34941,5.85182c-1.61872,1.23937 -5.34727,2.61471 -7.61545,4.27614c-1.93806,0.72964 -4.05974,0.36631 -5.96429,0.49741c0,6.5456 0,13.09103 0,19.63664c5.38761,2.48443 11.05611,4.66673 17.02903,4.41707c3.49819,-0.01511 7.09695,0.12343 10.50465,-0.831l0,0l-0.00001,0.00001l0.00001,-0.00002l0.00001,0zm-22.19534,2.09937c-2.74983,-1.11906 -5.49499,-2.25253 -8.21994,-3.43827c0.13033,-8.17406 0.26095,-16.34814 0.39131,-24.52221c2.17529,-0.08748 5.40386,1.05555 6.95497,-0.62753c4.16916,-1.41739 6.87652,-4.5523 10.53208,-6.9052c2.57151,-2.14068 4.62639,-2.87131 7.2828,-4.49489c2.01798,-0.98831 3.11063,-0.48362 5.38315,-0.05261c0.991,1.71767 2.22156,2.60551 1.58258,5.87773c-1.33169,0.70973 -3.0608,5.47997 -0.44239,5.5179c7.28833,0.73971 14.69396,-0.29997 21.92492,0.99293c1.80032,2.58183 2.14409,8.38225 -1.1519,10.01957c-3.15369,0.96566 -6.47843,0.48667 -9.71888,0.60274c0,2.44262 0.38126,5.55969 -2.17834,6.78658c-1.89017,2.61099 -2.02304,6.44663 -5.06876,8.35714c-2.56096,2.77985 -6.20765,3.63861 -9.76377,3.54691c-5.83258,0.08369 -11.97085,0.67587 -17.50782,-1.66052l0,-0.00025l0,0l0,-0.00001l0,-0.00001l-0.00001,0z" />
                    <g id="ball" transform="translate(30 70)">
                        <circle r="32" fill="red" />
                        <image xlink:href="../img/basketball.png" x="-30" y="-30" width="60" height="60" />
                    </g>
                    <g id="star" transform="translate(310 70)">
                        <image xlink:href="../img/star.png" x="-20" y="-20" height="40" width="40">
                            <animateTransform id="c1" attributeName="transform" attributeType="XML" type="scale"
                                values="1;1.1;1" dur="1s" fill="freeze" repeatCount="indefinite" />
                            <animate attributeType="css" attributeName="opacity" values="0.9;1;0.9" dur="1s"
                                fill="freeze" repeatCount="indefinite" />
                        </image>
                    </g>
                </g>
            </g>
            <g id="main">
                <g id="first" transform="translate(400 550)" db-cat="reward" />
                <circle cx="550" cy="550" r="30" db-pad="bad" />
                <g transform="translate(700 490)" db-cat="reward" />
                <line x1="0" y1="600" x2="1200" y2="600" db-pad="ground" />
                <!--<line x1="300" y1="500" x2="1500" y2="500" db-pad="ground" />
                <line x2="300" y2="500" x1="300" y1="600" db-pad="ground" />-->
                <line x1="1000" y1="250" x2="1160" y2="250" db-cat="target" />
                <line x1="1160" y1="255" x2="1000" y2="255" db-pad="wood" />
                <circle cx="1000" cy="250" r="6" db-pad="wood" />
                <circle cx="1160" cy="250" r="6" db-pad="wood" />
                <line x1="1200" y1="600" x2="1200" y2="0" db-pad="wood" />
                <g transform="translate(930 150)" db-cat="reward" />
            </g>
            <rect id="dummy" width="100%" height="100%" fill-opacity="0">
            </rect>
            <g id="front">
            </g>
        </svg>
    </div>
    <div id="skip">
        &lt;&lt; Skip Preview
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/jquery.countdown.js"></script>
    <script type="text/javascript" src="../js/jquery.colorbox.js"></script>
    <script type="text/javascript" src="../js/svg.js"></script>
    <script type="text/javascript" src="../js/db.js"></script>
    <script type="text/javascript">
        $(function () {
            db.path = [{ x: 0, y: 300 }, { x: 1200, y: 300}];

            var tipInterval = null;

            triggers.gameStarted = function (e) {
                setTimeout(function () {
                    showHint();
                    tipInterval = setInterval(showHint, 8000);
                }, 800);
            }
            triggers.getReward = function (e) {
                if (e.sender.attr("id") == "first")
                    clearInterval(tipInterval);
            }
            startGame({ ballPosition: { x: 100, y: 500} });
        });

        function showHint() {
            $("#tip").css({ opacity: 0.3 });
            var xHand = 100;
            var XBall = 30;
            var inter = setInterval(function () {
                xHand += 25;

                $("#hand").setTranslate(xHand, 100);
                tip.hit(xHand - 5, 70, { container: $("#tip") });
            }, 500);

            db.setTimer(3, function () {
                $("#ball").setTranslate(XBall++, 70);
            }, function () {
                $("#tip").animate({ opacity: 0 }, 500, function () {
                    $("#hand").setTranslate(100, 100);
                });
            });

            setTimeout(function () {
                clearInterval(inter);
            }, 3000);
        }
    </script>
</body>
</html>
